<template>
  <div class="qingwu">
    <div class="admin_table_page_title">回收站信息</div>
    <div class="unline underm"></div>

    <div class="admin_table_handle_btn">
      <a-form layout="inline" :form="form" @submit="handleSubmit">
        <a-form-item label="名称">
          <a-input v-model="name" />
        </a-form-item>
         <a-form-model-item label="分类">
          <a-select default-value="请选择分类" @change="handleChange">
              <a-select-option v-for="(v,k) in classify" :key="v.id" :value="v.id">
                {{v.title}}
              </a-select-option>
          </a-select>
        </a-form-model-item>
        <a-form-model-item label="省/市/区">
          <a-cascader
            :options="options"
            placeholder="请选择地址"
            @change="onChangeArea"
          />
        </a-form-model-item>

        <a-form-model-item>
          <a-button icon="search" @click="search"> 查询 </a-button>
        </a-form-model-item>
        <a-form-model-item>
          <a-button @click="reset">重置</a-button>
        </a-form-model-item>
      </a-form>
    </div>

    <div class="admin_table_handle_btn">
      <a-button
        @click="$router.push('/Estate/recovery_info/form')"
        type="primary"
        icon="plus"
        >添加</a-button
      >
      <a-button
        class="admin_delete_btn"
        type="danger"
        icon="delete"
        @click="del"
        >批量删除</a-button
      >
    </div>
    <div class="admin_table_list">
      <a-table
        :columns="columns"
        :data-source="list"
        :pagination="false"
        :row-selection="{
          selectedRowKeys: selectedRowKeys,
          onChange: onSelectChange,
        }"
        row-key="community_id"
      >
        <span slot="action" slot-scope="rows">
          <a-button
            icon="edit"
            @click="
              $router.push('/Estate/recovery_info/form/' + rows.id)
            "
            >编辑</a-button
          >
        </span>

        <span slot="status" slot-scope="rows">
          <a-switch
            v-if="rows.status == 1"
            checked-children="正常"
            un-checked-children="禁用"
            @change="onChangeStatus(rows.id)"
            default-checked
          />
          <a-switch
            v-else
            checked-children="正常"
            @change="onChangeStatus(rows.id)"
            un-checked-children="禁用"
          />
        </span>
      </a-table>
      <div class="admin_pagination" v-if="total > 0">
        <a-pagination
          v-model="params.page"
          :page-size.sync="params.per_page"
          :total="total"
          @change="onChange"
          show-less-items
        />
      </div>
    </div>
  </div>
</template>

<script>
export default {
  components: {},
  props: {},
  data() {
    return {
      params: {
        page: 1,
        per_page: 30,
      },
      total: 0, //总页数
      selectedRowKeys: [], // 被选择的行
      columns: [
        { title: "#", dataIndex: "id", fixed: "left" },
        { title: "名称", dataIndex: "name" },
        { title: "类别", dataIndex: "cate_name" },
        { title: "省", dataIndex: "province_name" },
        { title: "市", dataIndex: "city_name" },
        { title: "区", dataIndex: "area_name" },
        { title: "详细地址", dataIndex: "address", ellipsis: true },
        { title: "联系方式", dataIndex: "mobile", ellipsis: true },
        { title: "状态", scopedSlots: { customRender: "status" } },
        {
          title: "操作",
          fixed: "right",
          scopedSlots: { customRender: "action" },
        },
      ],
      list: [],
      name: "",
      cate_id: "",
      options: [],
      areas: [],
      classify:[]
    };
  },
  watch: {},
  computed: {},
  methods: {
     // 分类
    getPropertyLists() {
      this.$get(this.$api.house_cate_list, { type: 4 }).then((res) => {
        this.classify = res.data;
      });
    },
    // 选择分类
    handleChange(e){
      // console.log(e)
      this.cate_id = e
    },
    // 选择框被点击
    onSelectChange(selectedRowKeys) {
      this.selectedRowKeys = selectedRowKeys;
    },
    // 选择分页
    onChange(e) {
      this.params.page = e;
    },
    // 省市区发生改变事件
    onChangeArea(value, selectedOptions) {
      this.areas = value;
    },
    // 删除
    del() {
      if (this.selectedRowKeys.length == 0) {
        return this.$message.error("未选择数据.");
      }
      this.$confirm({
        title: "你确定要删除选择的数据？",
        content: "确定删除后无法恢复.",
        okText: "是",
        okType: "danger",
        cancelText: "取消",
        onOk: () => {
          let ids = this.selectedRowKeys.join(",");
          this.$delete(this.$api.recoveryInfo + "/" + ids).then((res) => {
            if (res.code == 200) {
              this.onload();
              this.$message.success("删除成功");
            } else {
              this.$message.error(res.msg);
            }
          });
        },
      });
    },

    // 搜索
    search() {
      this.params["name"] = this.name;
      this.params["areas"] = this.areas;
      this.params["cate_id"] = this.cate_id;
      this.$get(this.$api.recoveryInfo, this.params).then((res) => {
        this.total = res.data.total;
        this.list = res.data.data;
      });
    },

    // 重置
    reset() {
      location.reload();
    },

    // 获取城市列表
    get_area() {
      this.$get(this.$api.areasLists).then((res) => {
        this.options = res.data;
      });
    },

    onload() {
      this.$get(this.$api.recoveryInfo, this.params).then((res) => {
        this.total = res.data.total;
        this.list = res.data.data;
      });
    },

    onChangeStatus(id) {
      this.$post(this.$api.editRecoveryInfoShow, {
        id: id,
      }).then((res) => {
        if (res.code == 200) {
          this.$message.success(res.msg);
        } else {
          return this.$message.error(res.msg);
        }
      });
    },
  },
  created() {
    this.onload();
    this.get_area();
    this.getPropertyLists()
  },
  mounted() {},
};
</script>
<style lang="scss" scoped>
</style>
